<!DOCTYPE html>
<%@page import="com.wanmait.cookBook.vo.IndexPicture"%>
<%@page import="java.util.List"%>
<%@page import="com.wanmait.cookBook.vo.CookType"%>
<%@page import="com.wanmait.cookBook.vo.Pager"%>
<%@page import="com.wanmait.cookBook.vo.Userinfo"%>
<%@page import="java.util.ArrayList"%>
<html class="x-admin-sm">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
 		<%String path = request.getContextPath();  %>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       
        <link rel="stylesheet" href="<%=path%>/back/css/font.css">
        <link rel="stylesheet" href="<%=path%>/back/css/xadmin.css">
        <script src="<%=path%>/back/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="<%=path%>/back/js/xadmin.js"></script>
          <script type="text/javascript" src="<%=path%>/back/js/jquery-3.5.0.min.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                        
                        <!-- \\-------------------------------------------添加轮播图 -->
                        
                            
                         <!--// -------------------------------------------添加轮播图-->
                        </div>
                        <form id="myForm" method="post" enctype="multipart/form-data" style="margin-left:20px;" action="<%=path %>/IndexPictureServlet?action=addPicture">
                        	<input type="file" name="indexImage" id="picture"><span id="mes"></span><br>
                        	<input type="submit" value="添加图片" style="width:60px;height:30px;background-color:#009688;color:#fff;margin-top:10px;">
                        </form>
						<script type="text/javascript">
						$(function(){
							$("#myForm").submit(function(){
								if(""==$("#picture").val())
								{
									$("#mes").html("必填");
									$("#mes").css("color","red");
									return false;
								}
								
							});
						});
						</script>
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form">
                              <thead>
                                <tr>    
                                	<th>全选<input id="checkAllBox" type="checkbox" style="width:13px;height:13px;display: block;"></th>                            
                                 	<th>序号</th>
                                   	<th>图片</th>
                                	                               	
                                 	<th>状态</th>
                                 	<th>管理</th>  
                                 	<th>操作</th>
                                 </tr>	
                                
                              </thead>
                             
          				   <!-- --------------------每一条列表-------------------- -->                 
                                  <tbody>
                           	
                          <% List<IndexPicture> allIndexPicture = (ArrayList<IndexPicture>)request.getAttribute("allIndexPicture");%>
                                 <%for(IndexPicture indexPicture:allIndexPicture){ %>
                           		
                               			 <tr>
			                                  <td> <input pictureId="<%=indexPicture.getId() %>" class="checkBox" type="checkbox" style="width:13px;height:13px;display: block;"></td>
			                                  <td class="count"></td>
			                                  <td><img src="<%=path %>/back/indexBannerImages/<%=indexPicture.getPictureName() %>"></td>
			                                  <td class="td-status">
			                                  	<%String enable = indexPicture.isEnable()?"显示":"不显示";%>
			                                    <span class="layui-btn layui-btn-normal layui-btn-mini"><%=enable%></span>
			                                   </td>
			                                  <td class="td-manage">
			                            
			                                    <a class="state"  pictureId="<%=indexPicture.getId() %>" enable="<%=indexPicture.isEnable() %>" onclick="member_stop(this,'10001')" href="javascript:void(0);"  title="<%=enable %>">
			                                      <i class="layui-icon">&#xe601;</i>
			                                    </a>			                                    
			                                  </td>
			                                  <td><a href="javascript:void(0);" class="singleDelete" pictureId="<%=indexPicture.getId() %>">删除</a></td>
			                          </tr>
                         <%} %>
                          
                              </tbody>
                            </table>
                            <div style="margin-top:10px;margin-left:750px;">总计：<span class="total" style="color:red;"></span>张&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" style="color:#000;" id="deleteChecked">删除选中</a></div>
                        </div>
<!-- ------------------------显示超链接加事件------------------------------- -->
<script type="text/javascript">
	$(function(){
		$(".state").click(function(){
			var pictureId = $(this).attr("pictureId");
			var sum;
			var enable = $(this).attr("enable");
			if("true"==enable)sum=0;
			if("false"==enable)sum=1;
			$.ajax({
				url:"<%=path %>/IndexPictureServlet",
				type:"post",
				data:{pictureId:pictureId,action:"ifShowPicture",sum:sum},
				async:false,
				success:function(mes)
				{
					
				}
			});
		});
	});
</script>
<!-- -----------------------     全选复选框加事件           ------------------- -->
<script type="text/javascript">
	$(function(){
		$("#checkAllBox").click(function(){
			var flag = $(this).prop("checked");//无值的属性
			$(".checkBox").prop("checked",flag);
		});
	});
</script>
<!-- -----------------------单个删除加事件---------------------------- -->
<script type="text/javascript">
	$(function(){
		$(".singleDelete").on("click",function(){
			var pictureId = $(this).attr("pictureId");
			$(this).parent().parent().remove();
			$.ajax({
				url:"<%=path %>/IndexPictureServlet",
				type:"post",
				data:{pictureId:pictureId,action:"singleDelete"},
				async:false,
				success:function(mes)
				{
					////////////修改序号和合计
					var length = "<%=allIndexPicture.size()-1%>";
					var count = 0;
					$(".count").each(function(count){
							count++;
							$(this).html(count);
					});
					$(".total").html(length);	
				}	
			});
		});
	});
</script>
<!-- -------------------------------批量删除--------------------------------- -->
<script type="text/javascript" src="<%=path %>/back/js/jquery-3.5.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#deleteChecked").on("click",function(){
			var ids = "";
			var cks = $(".checkBox:checked");
			cks.each(function(){
				var pictureId = $(this).attr("pictureId");	
				ids = "," + pictureId + ids; 
				$(this).parent().parent().remove();
			});
			$.ajax({
				url:"<%=path%>/IndexPictureServlet",
				type:"post",
				data:{action:"deleteCheckedRecord",ids:ids},
				async:false,
				success:function(mes){
					////////////修改序号和合计
					var length = "<%=allIndexPicture.size()%>"-cks.length;
					var count = 0;
					$(".count").each(function(count){
							count++;
							$(this).html(count);
					});
					$(".total").html(length);
				}
			});
		});
		
	});
</script>
<!-- ------------------------------页面加载结束 显示序号------------------------------------ -->
<script type="text/javascript">
$(function(){
	var length = "<%=allIndexPicture.size()%>";
	var count = 0;
	$(".count").each(function(length){
		count ++ ;
		$(this).html(count);
	});
	$(".total").html(length);
});
</script>

   <!-- 修改单行数据 -->  
 
   </script>           
                        
                        
                         <!-- //--------------------每一条列表-------------------- --> 
                         
                         
                            
                       <!-- \\----------------------------------分页---------------------------------------- -->
                
         
                        <div class="layui-card-body ">
                        <div class="page">
                                <div>
                                
                     
                                		 <a class="prev" href="">&lt;&lt;</a>
                                		
                                		
                                						<a class="" href=""> </a>
                                	
                                  <a class="next" href="">&gt;&gt;</a>
                                
                                 </div>
                         </div>
                        </div>
   
					 <!-- 改变当前字体的颜色 -->                       
					                           
     		 <!-- //---------------------------------------------------分页-------------------------- -->
                    </div>
                </div>
            </div>
        </div> 
    </body>
    <script>
    
       /*用户-停用*/
      function member_stop(obj,id){
          layer.confirm('确认要更改吗？',function(index){

              if($(obj).attr('title')=='显示'){

                //发异步把用户状态进行更改
                $(obj).attr('title','不显示')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('被禁用');
                layer.msg('不显示!');

              }else{
                $(obj).attr('title','显示')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('正常');
                layer.msg('显示!');
              }
              
          });
      }

  


   
    </script>
   
</html>